﻿<%@ Page Title="关于我们" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="About.aspx.cs" Inherits="About" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
        $(function () {
            //动画速度
            var speed = 500;

            //绑定事件处理
            $("#btnShow").click(function (event) {
                //取消事件冒泡
                //event.stopPropagation();
                //设置弹出层位置
                //var offset = $(event.target).offset();
                //$("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
                //$("#divPop").fadeTo("slow", 0.25);
                if ($("#divPop").css("display") == "none") {
                    $("#divPop").fadeIn(10000);
                }
                else {
                    $("#divPop").fadeOut(10000);
                }

//                //动画显示
//                $("#divPop").toggle(1000, function () {
//                    $("#divPop").html("<div style=\"text-align: center;\">弹出层</div>");
//                });

            });
            //单击空白区域隐藏弹出层
            //$(document).click(function (event) { $("#divPop").hide(speed) });
            //单击弹出层则自身隐藏
            //$("#divPop").click(function (event) { $("#divPop").hide(speed) });
        });
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
   <div>
        <br /><br /><br />
        <input id="btnShow" type="button" value="显示提示文字"/>
    </div>
        
    <!-- 弹出层 -->
    <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:block;
        width: 300px; height: 100px;">
        <div style="text-align: center;">弹出层</div>
    </div>
    <p>底部文字反映透明效果!</p>
</asp:Content>
